<template>

  <div class="refine_auth">
    <h2 class="titleblue">权限管理</h2>
    <div class="contant">
      <div @click="showCreate" class="fl create" v-if='showCreateBtn'>新增权限</div>
      <div class="fr">
        <el-input prefix-icon="el-icon-search" placeholder="搜索角色" clearable v-model="keyword" class="plansearch"
                  @change='search'>
          <template slot="append">搜索</template>
        </el-input>
      </div>
      <data-table :page='currentPage' :head="head" :data="allRoles" :actions="actions" @callback="dataAction"></data-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="dataCount"
        background
      >
      </el-pagination>
    </div>
    <el-dialog
      title=""
      :visible.sync="showCreateDialog"
      width="80%"
      append-to-body
    >
        <auth-create v-if="showCreateDialog" :role-data="roleData" @update="update" @close='authClose' @cancel="authCancel"></auth-create>

    </el-dialog>
  </div>

</template>

<script>
  import DataTable from "@/components/common/DataTable.vue"
  import AuthCreate from "./AuthCreate.vue"
  import * as userRoleService from '@/services/UserRoleService.js'

  export default {
    components: {
      'data-table': DataTable,
      'auth-create': AuthCreate
    },
    data: function () {
      return {
        showCreateBtn: false,
        allRoles: [],
        dataCount: 0,
        showCreateDialog: false,
        roleData: null,
        type: '',
        keyword: '',
        currentPage: 1,
        ddid: '',
        head: [{
          name: "用户角色",
          prop: "name",
          width: "140"
        },
          {
            name: "系统权限",
            prop: "perm"
          },
        ],
        actions: ['edit', 'status', 'del'],
      };
    },
    created() {
      this.showCreateBtn = this.$checkPermission('/user/create')
    },
    mounted() {
      this.getData();
    },
    methods: {
      search() {
        this.currentPage = 1
        this.getData()
      },
      getData() {
        let query = 'status=in=0,-1'
        if (this.keyword) {
          query += ';name=like=' + this.keyword
        }
        userRoleService.searchp(query, this.currentPage - 1).then(res => {
          this.dataCount = res.dataCount
          res.data.forEach(r => {
            r.perm = r.userMenus.filter(m => m.parentId === 0).map(m => m.name).join(',')
          })
          this.allRoles = res.data
        })
      },
      showCreate() {
        this.roleData = null;
        this.showCreateDialog = true;
      },
      authClose() {
        this.getData()
        this.showCreateDialog = false
      },
      authCancel() {
        this.showCreateDialog = false;
      },
      close() {

        this.publishDialog = false;
        this.$router.go(-1);
      },
      dataAction(param) {
        if (param.action === 'edit') {
          this.showCreateDialog = true
          this.roleData = param.data
        } else if (param.action === 'status') {
          let data = param.data
          data.status = data.status === 0 ? 1 : 0
          userRoleService.update(data).then(() => {
            this.$alert(data.status === 0 ? '启用成功' : '禁用成功').then(() => {
              this.getData()
            })
          })
        } else if (param.action === 'del') {
          userRoleService.del(param.data.id).then(r => {
            if (this.allRoles.length === 1 && this.currentPage > 1) {
              this.currentPage--
            }
            this.$alert('删除成功').then(() => {
              this.getData()
            })
          })
        }
      },
      update() {
        this.editdialog = false;
        this.getData()
      },

      handleSizeChange(val) {

      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getData();
      },
    }
  }
</script>

<style lang="scss">

  .refine_auth {
    width: 100%;
    display: inline-block;

    .inlanselect {
      float: left;
      margin-right: 10px;
    }
    .table {
      margin-top: 20px;
      width: 100%;
      display: inline-block;
    }
  }

</style>
